<script setup lang="ts">
  import { componentNameByRoute, getExcludeCacheRoutes } from "./utils/router";
</script>

<template>
  <RouterView v-slot="{ Component, route }">
    <Transition
      name="fade"
      mode="out-in">
      <KeepAlive :exclude="getExcludeCacheRoutes()">
        <component
          :is="componentNameByRoute(route.name, Component)"></component>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

<style lang="scss">
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.1s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
